#!/usr/bin/env python3
"""
静态构建脚本 - 手动生成HTML文件
模拟Astro的构建过程，生成可部署的静态文件
"""

import os
import shutil
from pathlib import Path


def create_static_html():
    """创建静态HTML文件"""

    # 创建dist目录
    dist_dir = Path("dist")
    if dist_dir.exists():
        shutil.rmtree(dist_dir)
    dist_dir.mkdir()

    # 复制public目录内容
    public_dir = Path("public")
    if public_dir.exists():
        for item in public_dir.iterdir():
            if item.is_file():
                shutil.copy2(item, dist_dir)
            elif item.is_dir():
                shutil.copytree(item, dist_dir / item.name)

    # 从Astro源文件读取并转换为静态HTML
    print("📄 正在从Astro源文件生成静态HTML...")

    # 简化版主页HTML（基于修复后的Astro文件）
    index_html = """<!DOCTYPE html>
<html dir="ltr" lang="ja">
<head>
    <meta charset="utf-8">
    <title>KIYOMIZU-DERA TEMPLE</title>
    <meta name="description" content="Enjoy the stunning up-to-date information of Kiyomizu-dera Temple.">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/css/style.css" media="screen,print">
    <link rel="stylesheet" href="/fix.css" media="screen,print">
</head>
<body class="page-home load loded">
    <header>
        <div class="header_base"></div>
        <div class="header_wrap">
            <a href="/" id="logo">
                <img class="img_w" src="/img/common/icon/logo_pc_w.svg" alt="Kiyomizu-dera Temple Kyoto, Japan" width="226" height="40">
                <img class="img_b" src="/img/common/icon/logo_pc_b.svg" alt="Kiyomizu-dera Temple Kyoto, Japan" width="226" height="40">
            </a>
            <nav class="pcnav">
                <ul class="gnav">
                    <li class="gnav_01"><a href="#"><span class="navwrap">PRAY</span></a></li>
                    <li class="gnav_02"><a href="#"><span class="navwrap">VISIT</span></a></li>
                    <li class="gnav_03"><a href="#"><span class="navwrap">LEARN</span></a></li>
                    <li class="gnav_04"><a href="#"><span class="navwrap">LOCATION</span></a></li>
                    <li class="gnav_05"><a href="#"><span class="navwrap">FAQ</span></a></li>
                    <li class="gnav_06"><a href="/news"><span class="navwrap">NEWS</span></a></li>
                </ul>
            </nav>
        </div>
    </header>

    <div id="wrapAll">
        <div id="main">
            <section id="main_yt" class="main_yt_top mv">
                <div class="intro_pc">
                    <div class="ttl clearfix">
                        <div class="img">
                            <img src="/img/top/movie_ttl2.png" alt="A WIDELY WORSHIPED HOLY PLACE" width="680" height="372">
                            <span class="line l1"></span>
                            <span class="line l2"></span>
                            <span class="line l3"></span>
                        </div>
                    </div>
                    <p>The eleven faces and forty-two arms of <br>
                        Kannon show great compassion. <br>
                        People have felt very close to the principal <br>
                        image of the temple and <br>
                        called the deity "Kiyomizu Kannon-san."</p>
                </div>
                <a href="javascript:void(0);" class="scrollarr">
                    <span>
                        <img class="scrollarr_w" src="/img/common/icon/scroll_arr.svg" alt="" width="38" height="24">
                        <img class="scrollarr_b" src="/img/common/icon/scroll_arr_b.svg" alt="" width="38" height="24">
                    </span>
                </a>
                <div id="slide">
                    <div class="slide_wrap">
                        <ul class="pic">
                            <li>
                                <a href="#">
                                    <div class="cover"></div>
                                    <picture>
                                        <source media="(min-width: 979px)" type="image/webp" srcset="/img/top/top_mv_pc_01.webp" width="2600" height="1528">
                                        <source media="(min-width: 979px)" srcset="/img/top/top_mv_pc_01.jpg" width="2600" height="1528">
                                        <source type="image/webp" srcset="/img/top/top_mv_sp_01.webp" width="750" height="1228">
                                        <img class="main_img" src="/img/top/top_mv_sp_01.jpg" alt="" width="750" height="1228" decoding="async">
                                    </picture>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <div class="cover"></div>
                                    <picture>
                                        <source media="(min-width: 979px)" type="image/webp" srcset="/img/top/top_mv_pc_02.webp" width="2600" height="1528">
                                        <source media="(min-width: 979px)" srcset="/img/top/top_mv_pc_02.jpg" width="2600" height="1528">
                                        <source type="image/webp" srcset="/img/top/top_mv_sp_02.webp" width="750" height="1228">
                                        <img class="main_img" src="/img/top/top_mv_sp_02.jpg" alt="" width="750" height="1228" decoding="async">
                                    </picture>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <div class="cover"></div>
                                    <picture>
                                        <source media="(min-width: 979px)" type="image/webp" srcset="/img/top/top_mv_pc_03.webp" width="2600" height="1528">
                                        <source media="(min-width: 979px)" srcset="/img/top/top_mv_pc_03.jpg" width="2600" height="1528">
                                        <source type="image/webp" srcset="/img/top/top_mv_sp_03.webp" width="750" height="1228">
                                        <img class="main_img" src="/img/top/top_mv_sp_03.jpg" alt="" width="750" height="1228" decoding="async">
                                    </picture>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <div class="cover"></div>
                                    <picture>
                                        <source media="(min-width: 979px)" type="image/webp" srcset="/img/top/top_mv_pc_04.webp" width="2600" height="1528">
                                        <source media="(min-width: 979px)" srcset="/img/top/top_mv_pc_04.jpg" width="2600" height="1528">
                                        <source type="image/webp" srcset="/img/top/top_mv_sp_04.webp" width="750" height="1228">
                                        <img class="main_img" src="/img/top/top_mv_sp_04.jpg" alt="" width="750" height="1228" decoding="async">
                                    </picture>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <div class="cover"></div>
                                    <picture>
                                        <source media="(min-width: 979px)" type="image/webp" srcset="/img/top/top_mv_pc_05.webp" width="2600" height="1528">
                                        <source media="(min-width: 979px)" srcset="/img/top/top_mv_pc_05.jpg" width="2600" height="1528">
                                        <source type="image/webp" srcset="/img/top/top_mv_sp_05.webp" width="750" height="1228">
                                        <img class="main_img" src="/img/top/top_mv_sp_05.jpg" alt="" width="750" height="1228" decoding="async">
                                    </picture>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <div class="cover"></div>
                                    <picture>
                                        <source media="(min-width: 979px)" type="image/webp" srcset="/img/top/top_mv_pc_06.webp" width="2600" height="1528">
                                        <source media="(min-width: 979px)" srcset="/img/top/top_mv_pc_06.jpg" width="2600" height="1528">
                                        <source type="image/webp" srcset="/img/top/top_mv_sp_06.webp" width="750" height="1228">
                                        <img class="main_img" src="/img/top/top_mv_sp_06.jpg" alt="" width="750" height="1228" decoding="async">
                                    </picture>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </section>

            <section id="News">
                <div class="section_wrap">
                    <h2><span style="letter-spacing: 0.08em;">N</span><span style="letter-spacing: 0.08em;">E</span><span style="letter-spacing: 0.05em;">W</span>S</h2>
                    <div class="list">
                        <ul>
                            <li>
                                <a href="/news/evening-special-visit-2025" class="news_list_a">
                                    <dl>
                                        <dt>Mar 06, 2025</dt>
                                        <dd>The Evening Special Visit 2025 spring<span class="common_arr">
                                            <img src="/img/common/icon/arr-head.svg" alt="" width="14" height="14">
                                        </span></dd>
                                    </dl>
                                </a>
                            </li>
                        </ul>
                        <p class="news_list_link"><a href="/news">SEE MORE</a></p>
                    </div>
                </div>
            </section>

            <section id="Head">
                <div class="section_wrap">
                    <h2 class="lead show_pc">KANNON REIJO, THE EMBODIMENT OF<br>KANNON'S COMPASSION</h2>
                    <h2 class="lead show_tbsp">KANNON REIJO,<br>THE EMBODIMENT OF<br>KANNON'S COMPASSION</h2>
                    <p class="txt">Over 1250 years have passed since the foundation of Kiyomizu-dera Temple. Halfway up Mt. Otowa, one of the peaks in Kyoto's Higashiyama mountain range, stands the temple, to which large numbers of visitors come to pay their respects to Kannon, a deity of great mercy and compassion.</p>
                </div>
                <div id="Sp_content_link">
                    <div class="wrap">
                        <ul class="contentbnr">
                            <li>
                                <a href="#">
                                    <picture>
                                        <source type="image/webp" srcset="/img/top/pic_pray_sp.webp">
                                        <img src="/img/top/pic_pray_sp.jpg" alt="" width="745" height="193" loading="lazy">
                                    </picture>
                                    <p class="txt_box"><span class="tit">PRAY</span></p>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <picture>
                                        <source type="image/webp" srcset="/img/top/pic_visit_sp.webp">
                                        <img src="/img/top/pic_visit_sp.jpg" alt="" width="745" height="193" loading="lazy">
                                    </picture>
                                    <p class="txt_box"><span class="tit">VISIT</span></p>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <picture>
                                        <source type="image/webp" srcset="/img/top/pic_learn_sp.webp">
                                        <img src="/img/top/pic_learn_sp.jpg" alt="" width="745" height="193" loading="lazy">
                                    </picture>
                                    <p class="txt_box"><span class="tit">LEARN</span></p>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <picture>
                                        <source type="image/webp" srcset="/img/top/pic_location_sp.webp">
                                        <img src="/img/top/pic_location_sp.jpg" alt="" width="745" height="193" loading="lazy">
                                    </picture>
                                    <p class="txt_box"><span class="tit">LOCATION</span></p>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <picture>
                                        <source type="image/webp" srcset="/img/top/pic_faq_sp.webp">
                                        <img src="/img/top/pic_faq_sp.jpg" alt="" width="745" height="193" loading="lazy">
                                    </picture>
                                    <p class="txt_box"><span class="tit">FAQ</span></p>
                                </a>
                            </li>
                            <li class="last">
                                <a href="/news">
                                    <picture>
                                        <source type="image/webp" srcset="/img/top/pic_news_sp.webp">
                                        <img src="/img/top/pic_news_sp.jpg" alt="" width="745" height="193" loading="lazy">
                                    </picture>
                                    <p class="txt_box"><span class="tit">NEWS</span></p>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="speb">
                    <div class="wrap">
                        <ul>
                            <li>
                                <a href="/visit/#Event_Schedule">
                                    <picture>
                                        <source type="image/webp" srcset="/img/top/event_bnr_sp.webp">
                                        <img src="/img/top/event_bnr_sp.jpg" alt="" width="745" height="193" loading="lazy">
                                    </picture>
                                    <p class="txt_box"><span class="tit">EVENTS SCHEDULE IN 2025</span></p>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </section>

            <section class="content_link content_pray">
                <div class="wrap2 wrap2_0 wrapr">
                    <div class="base"></div>
                    <a href="#">
                        <dl>
                            <dt>
                                <p>PRAY</p>
                                <p class="poa">PRAY</p>
                            </dt>
                            <dd>
                                <p class="tit">Kannon Reijo, a widely worshiped holy place.</p>
                                <p class="txt">The eleven faces and forty-two arms of Kannon show great compassion. People have felt very close to the principal image of the temple and called the deity "Kiyomizu Kannon-san."</p>
                            </dd>
                        </dl>
                        <div class="pic">
                            <picture>
                                <source type="image/webp" srcset="/img/top/pic_pray.webp">
                                <img src="/img/top/pic_pray.jpg" alt="" width="1800" height="1073" loading="lazy">
                            </picture>
                        </div>
                    </a>
                </div>
            </section>
            <section class="content_link content_visit">
                <div class="wrap2 wrap2_1 wrapl">
                    <div class="base"></div>
                    <a href="#">
                        <div class="pic">
                            <picture>
                                <source type="image/webp" srcset="/img/top/pic_visit.webp">
                                <img src="/img/top/pic_visit.jpg" alt="" width="1800" height="1073" loading="lazy">
                            </picture>
                        </div>
                        <dl>
                            <dt>
                                <p>VISIT</p>
                                <p class="poa">VISIT</p>
                            </dt>
                            <dd>
                                <p class="tit">The Buddhist buildings express the Kannon's teachings.</p>
                                <p class="txt">From the scenery of the historic structures and temple buildings, visitors can feel the Kannon's merciful heart. Check our traditional event schedules on this page.</p>
                            </dd>
                        </dl>
                    </a>
                </div>
            </section>
            <section class="content_link content_learn">
                <div class="wrap2 wrap2_2 wrapr">
                    <div class="base"></div>
                    <a href="#">
                        <dl>
                            <dt>
                                <p>LEARN</p>
                                <p class="poa">LEARN</p>
                            </dt>
                            <dd>
                                <p class="tit">The history of Kiyomizu is the course of deep faith in Kannon.</p>
                                <p class="txt">The beginning of the temple dates back over 1250 years. One priest found a pure spring welling up deep in Mt. Otowa.</p>
                            </dd>
                        </dl>
                        <div class="pic">
                            <picture>
                                <source type="image/webp" srcset="/img/top/pic_learn.webp">
                                <img src="/img/top/pic_learn.jpg" alt="" width="1800" height="1073" loading="lazy">
                            </picture>
                        </div>
                    </a>
                </div>
            </section>
            <section class="content_link content_location last">
                <div class="wrap2 wrap2_3 wrapl">
                    <div class="base"></div>
                    <a href="#">
                        <div class="pic">
                            <picture>
                                <source type="image/webp" srcset="/img/top/pic_location.webp">
                                <img src="/img/top/pic_location.jpg" alt="" width="1800" height="1073" loading="lazy">
                            </picture>
                        </div>
                        <dl>
                            <dt>
                                <p>LOCATION</p>
                                <p class="poa">LOCATION</p>
                            </dt>
                            <dd>
                                <p class="tit">The temple offers a stunning cityscape of Kyoto.</p>
                                <p class="txt">View this page to learn about how to get here. Various means of transportation from Kyoto Station and many other stations are described.</p>
                            </dd>
                        </dl>
                    </a>
                </div>
            </section>

            <section id="EventBnr" class="even_bnr_pc">
                <div class="section_wrap">
                    <a href="/visit/#Event_Schedule">
                        <div class="base">
                            <div class="inbase"></div>
                        </div>
                        <span class="bwrap">
                            <picture>
                                <source type="image/webp" media="(max-width: 979px)" srcset="/img/top/event_bnr_tb.webp" width="807" height="137">
                                <source media="(max-width: 979px)" srcset="/img/top/event_bnr_tb.jpg" width="807" height="137">
                                <source type="image/webp" srcset="/img/top/event_bnr_pc.webp" width="1480" height="290">
                                <img src="/img/top/event_bnr_pc.jpg" alt="" width="1480" height="290" loading="lazy">
                            </picture>
                            <p class="txt">EVENTS SCHEDULE IN 2025</p>
                        </span>
                    </a>
                </div>
            </section>

            <section id="Instagram">
                <div class="section_wrap">
                    <h2>INSTAGRAM</h2>
                    <div class="zoom-instagram feed-390 layout-grid columns-4 spacing-4 perpage-3">
                        <div class="zoom-instagram-widget__items-wrapper">
                            <ul class="zoom-instagram-widget__items zoom-instagram-widget__items--no-js layout-grid" data-layout="grid" data-spacing="4" data-perpage="3">
                                <li class="zoom-instagram-widget__item" data-media-type="carousel_album">
                                    <div class="zoom-instagram-widget__item-inner-wrap">
                                        <img class="zoom-instagram-link zoom-instagram-link-new" src="/img/top/instagram_sample_1.jpg" width="240" height="320" alt="Kiyomizu-dera Temple" />
                                        <div class="hover-layout zoom-instagram-widget__overlay zoom-instagram-widget__black">
                                            <div class="zoom-instagram-icon-wrap">
                                                <a class="zoom-svg-instagram-stroke" href="https://www.instagram.com/feel_kiyomizudera/" rel="noopener nofollow" target="_blank"></a>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <a href="https://www.instagram.com/feel_kiyomizudera/" target="_blank" class="link"><span>SEE MORE</span></a>
                    <p class="instatext">Scenic beauty in all seasons and the solemn atmosphere of the temple grounds are being captured.</p>
                </div>
                <div class="sns">
                    <ul>
                        <li class="snsnav_01">
                            <a href="https://www.facebook.com/KiyomizuderaTemple/?fref=ts" target="_blank">
                                <img src="/img/common/icon/fb.svg" alt="Facebook" width="28" height="28" loading="lazy">
                            </a>
                        </li>
                        <li class="snsnav_03">
                            <a href="https://www.instagram.com/feel_kiyomizudera/" target="_blank">
                                <img src="/img/common/icon/in.svg" alt="Instagram" width="28" height="28" loading="lazy">
                            </a>
                        </li>
                        <li class="snsnav_04">
                            <a href="https://www.youtube.com/channel/UCBFW3Al5zoKJOVJaLcDUL9Q" target="_blank">
                                <img src="/img/common/icon/yt.svg" alt="YouTube" width="140" height="84" loading="lazy">
                            </a>
                        </li>
                    </ul>
                </div>
            </section>

            <section id="Bnr">
                <div class="section_wrap">
                    <a href="https://feel.kiyomizudera.or.jp/" target="_blank">
                        <div class="bnr_wrap_pc">
                            <div class="base">
                                <div class="inbase"></div>
                            </div>
                            <dl>
                                <dt>
                                    <picture>
                                        <source type="image/webp" srcset="/img/top/bnr_pc.webp">
                                        <img src="/img/top/bnr_pc.jpg" alt="" width="388" height="258" loading="lazy">
                                    </picture>
                                </dt>
                                <dd>
                                    <div class="tit">
                                        <img src="/img/common/icon/feel_b.svg" alt="FEEL_KIYOMIZUDERA" width="296" height="16" loading="lazy">
                                    </div>
                                    <p class="txt">The project presents a new perspective and a fresh interpretation of prayer through a variety of experimental expressions beyond convention.</p>
                                </dd>
                            </dl>
                        </div>
                    </a>
                </div>
            </section>
        </div>
    </div>

    <footer>
        <div class="footer_wrap">© Kiyomizu-dera Temple</div>
    </footer>

    <script>
    document.addEventListener('DOMContentLoaded', function() {
        document.body.classList.add('load', 'loded');
        const wrapAll = document.getElementById('wrapAll');
        if (wrapAll) {
            wrapAll.style.opacity = '1';
        }
    });
    </script>
</body>
</html>"""

    # 写入主页
    with open(dist_dir / "index.html", "w", encoding="utf-8") as f:
        f.write(index_html)

    # 创建ports目录和页面
    ports_dir = dist_dir / "ports"
    ports_dir.mkdir()

    # 创建about目录和页面
    about_dir = dist_dir / "about"
    about_dir.mkdir()

    # 创建tag目录和页面
    tag_dir = dist_dir / "tag"
    tag_dir.mkdir()

    # 新闻列表页面
    news_index_html = """<!DOCTYPE html>
<html dir="ltr" lang="ja">
<head>
    <meta charset="utf-8">
    <title>NEWS | KIYOMIZU-DERA TEMPLE</title>
    <meta name="description" content="Latest news from Kiyomizu-dera Temple.">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/css/style.css" media="screen,print">
    <link rel="stylesheet" href="/fix.css" media="screen,print">
</head>
<body class="page-sub page-news load loded">
    <header>
        <div class="header_base"></div>
        <div class="header_wrap">
            <a href="/" id="logo">
                <img class="img_w" src="/img/common/icon/logo_pc_w.svg" alt="Kiyomizu-dera Temple Kyoto, Japan" width="226" height="40">
                <img class="img_b" src="/img/common/icon/logo_pc_b.svg" alt="Kiyomizu-dera Temple Kyoto, Japan" width="226" height="40">
            </a>
            <nav class="pcnav">
                <ul class="gnav">
                    <li class="gnav_06"><a href="/news" class="current"><span class="navwrap">NEWS</span></a></li>
                </ul>
            </nav>
        </div>
    </header>
    
    <div id="wrapAll">
        <div id="main">
            <section id="head" class="section1_1">
                <h1>NEWS</h1>
            </section>
            
            <section class="list">
                <div class="section_wrap">
                    <article>
                        <div class="news_list_wrap">
                            <a href="/news/evening-special-visit-2025">
                                <div class="pic">
                                    <img src="/img/top/movie_ttl2.png" alt="The Evening Special Visit 2025 spring" width="100%">
                                </div>
                                <div class="tit_box">
                                    <p class="data">Mar 06, 2025</p>
                                    <div class="newstit">
                                        <p>The Evening Special Visit 2025 spring</p>
                                    </div>
                                </div>
                            </a>
                        </div>
                    </article>
                </div>
            </section>
        </div>
    </div>
    
    <footer>
        <div class="footer_wrap">© Kiyomizu-dera Temple</div>
    </footer>
    
    <script>
    document.addEventListener('DOMContentLoaded', function() {
        document.body.classList.add('load', 'loded');
        const wrapAll = document.getElementById('wrapAll');
        if (wrapAll) {
            wrapAll.style.opacity = '1';
        }
    });
    </script>
</body>
</html>"""

    # 简单的页面内容，实际使用Astro开发服务器
    print("📝 静态页面已生成，建议使用 npm run dev 进行开发")

    print("✅ 静态文件构建完成！")
    print(f"📁 输出目录: {dist_dir.absolute()}")
    print("🚀 可以部署到任何静态托管服务")


if __name__ == "__main__":
    print("🔨 开始构建静态文件...")
    create_static_html()
    print("✨ 构建完成！")
